<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试.html</title>
    <!--导入js package-->
    <script type="text/javascript" src="../01-vue_js/vue.js"></script>
    <script type="text/javascript" src="../01-vue_js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <h2>显示格式化后的时间</h2>
    <!--如果是调用计算属性那就不用括号，直接采用属性名字-->
    <h2>现在的时间：{{fmtTime}}</h2>
    <!--如果是自己调用函数那就是使用函数的调用方法 function()-->
    <h2>现在的时间：{{getFormatTime()}}</h2>
    <!--使用过滤也是一种函数-->
    <h2>现在的时间：{{time | timeFormater}}</h2>
    <!--使用过滤的传参-->
    <h2>现在的时间：{{time | timeFormater('YYYY-MM-DD')}}</h2>
    <!--使用过滤的多个串联-->
    <h2>现在的时间：{{time | timeFormater('YYYY-MM-DD') | timeFormater('YYYY') | mySlice1()}}</h2>
</div>

<script type="text/javascript">
    // 关闭开发环境的警告提示
    Vue.config.productionTip = false
    Vue.filter('mySlice1',function (val){
        return val.slice(0,2)
    })
    // 创建vue的对象
    new Vue({
        el: '#root',
        data: {
            time: 1686574684762,
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFormatTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        // 局部过滤器
        filters:{
            timeFormater(val,str="YYYY-MM-DD HH:mm:ss"){
                return dayjs(val).format(str)
            },
            mySlice2(val){
                return val.slice(0,4)
            }
        }
    })
</script>
</body>
</html>